Reactã®experimental_useActionStateããã¯ãæ¢æ±ããã¢ã¯ã·ã§ã³ã®ç¶æ 管çãå¹çåããŠããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãšã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåäžãããŸããå®è·µçãªäŸãšãã¹ããã©ã¯ãã£ã¹ã解説ããŸãã
Reactã®experimental_useActionStateå®è£ ïŒåŒ·åãããã¢ã¯ã·ã§ã³ç¶æ 管ç
Reactã¯é²åãç¶ããéçºãå¹çåããã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãåäžããã驿°çãªæ©èœãå°å
¥ããŠããŸãããã®ãããªæ©èœã®äžã€ãexperimental_useActionStateããã¯ã§ãããã®ããã¯ã¯ãReactã®å®éšçãªAPIã®äžéšã§ãããç¹ã«ãã©ãŒã ããµãŒããŒãµã€ãã®ãã¥ãŒããŒã·ã§ã³ãæ±ãéã«ãéåæã¢ã¯ã·ã§ã³ã«é¢é£ããç¶æ
ãããæŽç·Žãããå¹ççãªæ¹æ³ã§ç®¡çããææ®µãæäŸããŸãããã®èšäºã§ã¯ãexperimental_useActionStateããã¯ãæ·±ãæãäžãããã®å©ç¹ãå®è£
æ¹æ³ããããŠã°ããŒãã«ãªé©çšæ§ã«çŠç¹ãåœãŠãå®è·µçãªãŠãŒã¹ã±ãŒã¹ãæ¢ããŸãã
ã¢ã¯ã·ã§ã³ç¶æ 管çã®çè§£
experimental_useActionStateã®è©³çްã«å
¥ãåã«ãããã解決ããããšããŠããåé¡ãçè§£ããããšãéèŠã§ããå€ãã®Reactã¢ããªã±ãŒã·ã§ã³ãç¹ã«ãã©ãŒã ãããŒã¿æäœã䌎ããã®ã§ã¯ãã¢ã¯ã·ã§ã³ãéåææäœïŒäŸïŒãµãŒããŒãžã®ãã©ãŒã éä¿¡ãããŒã¿ããŒã¹ã®æŽæ°ïŒãããªã¬ãŒããŸãããããã®ã¢ã¯ã·ã§ã³ã®ç¶æ
ïŒããŒãã£ã³ã°ç¶æ
ããšã©ãŒã¡ãã»ãŒãžãæåã€ã³ãžã±ãŒã¿ãŒãªã©ïŒã管çããããšã¯ãåŸæ¥ã®state管çæè¡ïŒäŸïŒuseStateãReduxãContext APIïŒã䜿çšãããšãè€éã§åé·ã«ãªããã¡ã§ãã
ãŠãŒã¶ãŒããã©ãŒã ãéä¿¡ããã·ããªãªãèããŠã¿ãŸãããã远跡ããå¿ èŠãããã®ã¯ä»¥äžã®éãã§ãïŒ
- ããŒãã£ã³ã°ç¶æ ïŒ ãã©ãŒã ãåŠçäžã§ããããšã瀺ãããã
- ãšã©ãŒç¶æ ïŒ éä¿¡ã倱æããå Žåã«ãšã©ãŒã¡ãã»ãŒãžã衚瀺ããããã
- æåç¶æ ïŒ éä¿¡æåæã«ãŠãŒã¶ãŒã«ãã£ãŒãããã¯ãæäŸããããã
åŸæ¥ãããã«ã¯è€æ°ã®useStateããã¯ãšãéåæã¢ã¯ã·ã§ã³ã®çµæã«åºã¥ããŠããããæŽæ°ããããã®è€éãªããžãã¯ãå¿
èŠã«ãªããããããŸããããã®ã¢ãããŒãã¯ãã³ãŒããèªã¿ã«ãããä¿å®ãé£ããããšã©ãŒãçºçãããããã®ã«ãªãå¯èœæ§ããããŸããexperimental_useActionStateããã¯ã¯ãã¢ã¯ã·ã§ã³ãšããã«é¢é£ããç¶æ
ãåäžã®ç°¡æœãªãŠãããã«ã«ãã»ã«åããããšã§ããã®ããã»ã¹ãç°¡çŽ åããŸãã
experimental_useActionStateã®ç޹ä»
experimental_useActionStateããã¯ã¯ãã¢ã¯ã·ã§ã³ã®ç¶æ
ãèªåçã«ç®¡çããæ¹æ³ãæäŸããããŒãã£ã³ã°ç¶æ
ããšã©ãŒãæåã¡ãã»ãŒãžã®åŠçãç°¡çŽ åããŸããå
¥åãšããŠã¢ã¯ã·ã§ã³é¢æ°ãåãåãã以äžã®èŠçŽ ãå«ãé
åãè¿ããŸãïŒ
- ç¶æ
ïŒ ã¢ã¯ã·ã§ã³ã®çŸåšã®ç¶æ
ïŒäŸïŒ
nullããšã©ãŒã¡ãã»ãŒãžããŸãã¯æåããŒã¿ïŒã - ã¢ã¯ã·ã§ã³ïŒ ã¢ã¯ã·ã§ã³ãããªã¬ãŒããç¶æ ãèªåçã«æŽæ°ãã颿°ã
ãã®ããã¯ã¯ç¹ã«ä»¥äžã®å Žåã«åœ¹ç«ã¡ãŸãïŒ
- ãã©ãŒã ãã³ããªã³ã°ïŒ ãã©ãŒã éä¿¡ã®ç¶æ ïŒããŒãã£ã³ã°ããšã©ãŒãæåïŒã管çããã
- ãµãŒããŒãµã€ãã®ãã¥ãŒããŒã·ã§ã³ïŒ ãµãŒããŒäžã®ããŒã¿ã®æŽæ°ãåŠçããã
- éåææäœïŒ ãããã¹ãéåæã³ãŒã«ããã¯ã䌎ãããããæäœã管çããã
å®è£ ã®è©³çް
experimental_useActionStateã®åºæ¬çãªæ§æã¯ä»¥äžã®éãã§ãïŒ
const [state, action] = experimental_useActionState(originalAction);
ããã§originalActionã¯ãç®çã®æäœãå®è¡ãã颿°ã§ãããã®ã¢ã¯ã·ã§ã³é¢æ°ã¯ãå€ïŒæåã衚ãïŒãè¿ããããšã©ãŒãã¹ããŒããïŒå€±æã衚ãïŒããã«èšèšãããã¹ãã§ããReactã¯ã¢ã¯ã·ã§ã³ã®çµæã«åºã¥ããŠstateãèªåçã«æŽæ°ããŸãã
å®è·µçãªäŸ
äŸ1ïŒåºæ¬çãªãã©ãŒã éä¿¡
ç°¡åãªãã©ãŒã éä¿¡ã®äŸãèããŠã¿ãŸããããåäžã®å ¥åãã£ãŒã«ããšéä¿¡ãã¿ã³ãæã€ãã©ãŒã ãäœæããŸãããã©ãŒã ã®éä¿¡ã¯ããµãŒããŒãžã®ããŒã¿éä¿¡ãã·ãã¥ã¬ãŒãããŸãããã®ã°ããŒãã«ãªæèã§ã¯ããµãŒããŒãäžã€ã®åœã«ããããã©ãŒã ãéä¿¡ãããŠãŒã¶ãŒãå¥ã®åœã«ãããšä»®å®ããé å»¶ã®å¯èœæ§ãšæç¢ºãªããŒãã£ã³ã°ç¶æ ã®å¿ èŠæ§ã匷調ããŸãã
import React from 'react';
import { experimental_useActionState as useActionState } from 'react';
async function submitForm(data) {
// Simulate a server request with latency
await new Promise(resolve => setTimeout(resolve, 1000));
if (data.name === "error") {
throw new Error("Submission failed!");
}
return "Form submitted successfully!";
}
function MyForm() {
const [state, submit] = useActionState(async (prevState, formData) => {
const data = Object.fromEntries(formData);
return submitForm(data);
});
return (
);
}
export default MyForm;
ãã®äŸã§ã¯ïŒ
submitForm颿°ã¯ãé å»¶ã䌎ããµãŒããŒãªã¯ãšã¹ããã·ãã¥ã¬ãŒãããŸãããšã©ãŒåŠçã瀺ãããã«ãå ¥åããerrorãã®å Žåã«ãšã©ãŒãã¹ããŒããŸããuseActionStateããã¯ã¯ããã©ãŒã éä¿¡ã®ç¶æ ã管çããããã«äœ¿çšãããŸããstate倿°ã¯ã¢ã¯ã·ã§ã³ã®çŸåšã®ç¶æ ãä¿æããŸãïŒåæç¶æ ã¯nullãéä¿¡ã倱æããå Žåã¯ãšã©ãŒã¡ãã»ãŒãžãéä¿¡ãæåããå Žåã¯æåã¡ãã»ãŒãžïŒãsubmit颿°ã¯ããã©ãŒã éä¿¡ãããªã¬ãŒããã¢ã¯ã·ã§ã³é¢æ°ã§ãã- éä¿¡äžã¯ãã¿ã³ãç¡å¹ã«ãªãããŠãŒã¶ãŒã«èŠèŠçãªãã£ãŒãããã¯ãæäŸããŸãã
- ãšã©ãŒã¡ãã»ãŒãžãšæåã¡ãã»ãŒãžã¯
stateã«åºã¥ããŠè¡šç€ºãããŸãã
説æïŒ ãã®äŸã¯ãåºæ¬çãªãã©ãŒã éä¿¡ã瀺ããŠããŸãããã¿ã³ã®`disabled`ããããã£ãšè¡šç€ºãããããã¹ããçŸåšã®`state`ã«äŸåããŠããããšã«æ³šæããŠãã ãããããã«ããããŠãŒã¶ãŒã®å Žæã«é¢ä¿ãªãå³åº§ã«ãã£ãŒãããã¯ãæäŸãããç¹ã«ç°ãªããããã¯ãŒã¯é å»¶ãçµéšããå¯èœæ§ã®ããæµ·å€ã®ãŠãŒã¶ãŒã«ãšã£ãŠããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžããŸãããšã©ãŒãã³ããªã³ã°ããéä¿¡ã倱æããå Žåã«ãŠãŒã¶ãŒã«æç¢ºãªã¡ãã»ãŒãžãæç€ºããŸãã
äŸ2ïŒãªããã£ãã¹ãã£ãã¯æŽæ°
ãªããã£ãã¹ãã£ãã¯æŽæ°ïŒæ¥œèŠ³çæŽæ°ïŒãšã¯ãã¢ã¯ã·ã§ã³ãæåããããšãåæãšããŠUIãå³åº§ã«æŽæ°ããã¢ã¯ã·ã§ã³ã倱æããå Žåã«æŽæ°ãå ã«æ»ãææ³ã§ããããã«ãããã¢ããªã±ãŒã·ã§ã³ã®äœæããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããšãã§ããŸãããŠãŒã¶ãŒã®ãããã£ãŒã«åãæŽæ°ããäŸãèããŠã¿ãŸãããããµãŒããŒãé éå°ã«ããå¯èœæ§ã®ãããã©ãããã©ãŒã ãæäœããæµ·å€ã®ãŠãŒã¶ãŒã«ãšã£ãŠããªããã£ãã¹ãã£ãã¯æŽæ°ã¯ãšã¯ã¹ããªãšã³ã¹ãããå¿çæ§ã®é«ããã®ã«æããããããšãã§ããŸãã
import React, { useState } from 'react';
import { experimental_useActionState as useActionState } from 'react';
async function updateProfileName(newName) {
// Simulate a server request with latency
await new Promise(resolve => setTimeout(resolve, 1000));
if (newName === "error") {
throw new Error("Failed to update profile name!");
}
return newName;
}
function Profile() {
const [currentName, setCurrentName] = useState("John Doe");
const [state, updateName] = useActionState(async (prevState, newName) => {
try {
const updatedName = await updateProfileName(newName);
setCurrentName(updatedName); // Optimistic update
return updatedName; // Return value to indicate success
} catch (error) {
// Revert optimistic update on failure (Important!)
setCurrentName(prevState);
throw error; // Re-throw to update the state
}
});
return (
Current Name: {currentName}
);
}
export default Profile;
ãã®äŸã§ã¯ïŒ
updateProfileName颿°ã¯ããµãŒããŒäžã§ãŠãŒã¶ãŒã®ãããã£ãŒã«åãæŽæ°ããã®ãã·ãã¥ã¬ãŒãããŸããcurrentNameç¶æ 倿°ã¯ããŠãŒã¶ãŒã®çŸåšã®ååãä¿åããŸããuseActionStateããã¯ã¯ãååæŽæ°ã¢ã¯ã·ã§ã³ã®ç¶æ ã管çããŸãã- ãµãŒããŒãªã¯ãšã¹ããè¡ãåã«ãUIã¯æ°ããååã§æ¥œèгçã«æŽæ°ãããŸãïŒ
setCurrentName(newName)ïŒã - ãµãŒããŒãªã¯ãšã¹ãã倱æããå ŽåãUIã¯ä»¥åã®ååã«æ»ãããŸãïŒ
setCurrentName(prevState)ïŒã - ãšã©ãŒã¡ãã»ãŒãžãšæåã¡ãã»ãŒãžã¯
stateã«åºã¥ããŠè¡šç€ºãããŸãã
説æïŒ ãã®äŸã¯ããªããã£ãã¹ãã£ãã¯æŽæ°ã瀺ããŠããŸããUIã¯å³åº§ã«æŽæ°ããããããã¢ããªã±ãŒã·ã§ã³ãããå¿çæ§ãé«ãããã«æããããŸããæŽæ°ã倱æããå ŽåïŒæ°ããååãšããŠãerrorããšå ¥åããããšã§ã·ãã¥ã¬ãŒãïŒãUIã¯å ã«æ»ãããã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸãããŸããéèŠãªã®ã¯ã以åã®ç¶æ ãä¿åããã¢ã¯ã·ã§ã³ã倱æããå Žåã«ããã«æ»ãããšã§ããã€ã³ã¿ãŒãããæ¥ç¶ãé ãããŸãã¯ä¿¡é Œæ§ã®äœãå°åã®ãŠãŒã¶ãŒã«ãšã£ãŠããªããã£ãã¹ãã£ãã¯æŽæ°ã¯ã¢ããªã±ãŒã·ã§ã³ã®äœæããã©ãŒãã³ã¹ãåçã«åäžãããããšãã§ããŸãã
äŸ3ïŒãã¡ã€ã«ã¢ããããŒã
ãã¡ã€ã«ã®ã¢ããããŒãã¯äžè¬çãªéåææäœã§ããexperimental_useActionStateã䜿çšãããšããã¡ã€ã«ã¢ããããŒãäžã®ããŒãã£ã³ã°ç¶æ
ãé²ææŽæ°ããšã©ãŒãã³ããªã³ã°ã®ç®¡çãç°¡çŽ åã§ããŸããç°ãªãåœã®ãŠãŒã¶ãŒãäžå€®éæš©åã®ãµãŒããŒã«ãã¡ã€ã«ãã¢ããããŒãããã·ããªãªãèããŠã¿ãŸãããããã¡ã€ã«ãµã€ãºããããã¯ãŒã¯ç¶æ³ã¯å€§ããç°ãªãå¯èœæ§ãããããããŠãŒã¶ãŒã«æç¢ºãªãã£ãŒãããã¯ãæäŸããããšãéåžžã«éèŠã§ãã
import React from 'react';
import { experimental_useActionState as useActionState } from 'react';
async function uploadFile(file) {
// Simulate file upload with progress updates
return new Promise((resolve, reject) => {
let progress = 0;
const interval = setInterval(() => {
progress += 10;
// Simulate potential server error
if(progress >= 50 && file.name === "error.txt") {
clearInterval(interval);
reject(new Error("File upload failed!"));
return;
}
if (progress >= 100) {
clearInterval(interval);
resolve("File uploaded successfully!");
}
// You would typically dispatch a progress update here in a real scenario
}, 100);
});
}
function FileUploader() {
const [state, upload] = useActionState(async (prevState, file) => {
return uploadFile(file);
});
const handleFileChange = (event) => {
const file = event.target.files[0];
upload(file);
};
return (
{state === null ? null : Uploading...
}
{state instanceof Error && Error: {state.message}
}
{typeof state === 'string' && {state}
}
);
}
export default FileUploader;
ãã®äŸã§ã¯ïŒ
uploadFile颿°ã¯ãé²ææŽæ°ã䌎ããã¡ã€ã«ã¢ããããŒããã·ãã¥ã¬ãŒãããŸãïŒãã ããå®éã®é²ææŽæ°ã¡ã«ããºã ã¯æ¬çªå®è£ ã§ã¯å¿ èŠã«ãªããŸãïŒãuseActionStateããã¯ã¯ããã¡ã€ã«ã¢ããããŒãã¢ã¯ã·ã§ã³ã®ç¶æ ã管çããŸãã- ãã¡ã€ã«ãã¢ããããŒããããŠããéãUIã«ã¯ãUploading...ããšããã¡ãã»ãŒãžã衚瀺ãããŸãã
- ãšã©ãŒã¡ãã»ãŒãžãšæåã¡ãã»ãŒãžã¯
stateã«åºã¥ããŠè¡šç€ºãããŸãã
説æïŒ
ãã®åçŽåãããäŸã«ã¯å®éã®é²ææŽæ°ã¯å«ãŸããŠããŸããããexperimental_useActionStateãã¢ããããŒãå
šäœã®ç¶æ
ãã©ã®ããã«ç®¡çã§ãããã瀺ããŠããŸããå®éã®ã¢ããªã±ãŒã·ã§ã³ã§ã¯ãuploadFile颿°å
ã«é²æå ±åã¡ã«ããºã ãçµ±åãã鲿æ
å ±ã§ç¶æ
ãæŽæ°ããå¯èœæ§ããããŸããè¯ãå®è£
ã§ã¯ãã¢ããããŒãæäœããã£ã³ã»ã«ããæ©èœãæäŸããã§ãããã垯åå¹
ãéãããŠãããŠãŒã¶ãŒã«ãšã£ãŠãã¢ããããŒãã®é²æç¶æ³ããšã©ãŒã¡ãã»ãŒãžãæäŸããããšã¯ãè¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®ããã«äžå¯æ¬ ã§ãã
experimental_useActionStateã䜿çšããå©ç¹
- ç¶æ 管çã®ç°¡çŽ åïŒ ã¢ã¯ã·ã§ã³ã®ç¶æ ã管çããããã®å®åã³ãŒããåæžããŸãã
- ã³ãŒãã®å¯èªæ§åäžïŒ ã³ãŒããçè§£ãããããä¿å®ããããããŸãã
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒ éåææäœäžã«ãŠãŒã¶ãŒã«æç¢ºãªãã£ãŒãããã¯ãæäŸããŸãã
- ãšã©ãŒã®åæžïŒ æåã§ã®ç¶æ 管çã«äŒŽããšã©ãŒã®ãªã¹ã¯ãæå°éã«æããŸãã
- ãªããã£ãã¹ãã£ãã¯æŽæ°ïŒ ããã©ãŒãã³ã¹åäžã®ããã®ãªããã£ãã¹ãã£ãã¯æŽæ°ã®å®è£ ãç°¡çŽ åããŸãã
èæ ®äºé ãšå¶é
- å®éšçAPIïŒ
experimental_useActionStateããã¯ã¯Reactã®å®éšçAPIã®äžéšã§ãããå°æ¥ã®ãªãªãŒã¹ã§å€æŽãŸãã¯åé€ãããå¯èœæ§ããããŸããæ¬çªç°å¢ã§ã®äœ¿çšã«ã¯æ³šæãå¿ èŠã§ãã - ãšã©ãŒãã³ããªã³ã°ïŒ ã¢ã¯ã·ã§ã³é¢æ°ãäŸå€ãã¹ããŒããããšã§ãšã©ãŒãé©åã«åŠçããããã«ããŠãã ãããããã«ãããReactãèªåçã«ãšã©ãŒã¡ãã»ãŒãžã§ç¶æ ãæŽæ°ã§ããããã«ãªããŸãã
- ç¶æ
ã®æŽæ°ïŒ
experimental_useActionStateããã¯ã¯ãã¢ã¯ã·ã§ã³ã®çµæã«åºã¥ããŠèªåçã«ç¶æ ãæŽæ°ããŸããã¢ã¯ã·ã§ã³é¢æ°å ã§æåã§ç¶æ ãæŽæ°ããããšã¯é¿ããŠãã ããã
ãã¹ããã©ã¯ãã£ã¹
- ã¢ã¯ã·ã§ã³ãçŽç²ã«ä¿ã€ïŒ ã¢ã¯ã·ã§ã³é¢æ°ãçŽç²é¢æ°ã§ããããšã確èªããŠãã ãããã€ãŸããå¯äœçšïŒUIã®æŽæ°ä»¥å€ïŒãæãããåãå ¥åã«å¯ŸããŠåžžã«åãåºåãè¿ãããã«ããŸãã
- ãšã©ãŒãé©åã«åŠçããïŒ ã¢ã¯ã·ã§ã³é¢æ°ã«å ç¢ãªãšã©ãŒãã³ããªã³ã°ãå®è£ ãããŠãŒã¶ãŒã«æçãªãšã©ãŒã¡ãã»ãŒãžãæäŸããŸãã
- ãªããã£ãã¹ãã£ãã¯æŽæ°ãè³¢æã«äœ¿çšããïŒ ãªããã£ãã¹ãã£ãã¯æŽæ°ã¯ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããããšãã§ããŸãããæåã®å¯èœæ§ãé«ãç¶æ³ã§è³¢æã«äœ¿çšããŠãã ããã
- æç¢ºãªãã£ãŒãããã¯ãæäŸããïŒ ããŒãã£ã³ã°ç¶æ ãé²ææŽæ°ããšã©ãŒã¡ãã»ãŒãžãªã©ãéåææäœäžã«ãŠãŒã¶ãŒã«æç¢ºãªãã£ãŒãããã¯ãæäŸããŸãã
- 培åºçã«ãã¹ãããïŒ æåã倱æããšããžã±ãŒã¹ãå«ããã¹ãŠã®å¯èœãªã·ããªãªãã³ãŒããåŠçããããšã確èªããããã«ã培åºçã«ãã¹ãããŠãã ããã
å®è£ ã«ãããã°ããŒãã«ãªèæ ®äºé
ã°ããŒãã«ãªãŠãŒã¶ãŒã察象ãšããã¢ããªã±ãŒã·ã§ã³ã§experimental_useActionStateãå®è£
ããéã«ã¯ã以äžãèæ
®ããŠãã ããïŒ
- ããŒã«ãªãŒãŒã·ã§ã³ïŒ ãã¹ãŠã®ãšã©ãŒã¡ãã»ãŒãžãšæåã¡ãã»ãŒãžããç°ãªãèšèªãå°åã«åãããŠé©åã«ããŒã«ã©ã€ãºãããŠããããšã確èªããŠãã ãããåœéåïŒi18nïŒã©ã€ãã©ãªã䜿çšããŠç¿»èš³ã管çããŸãã
- ã¿ã€ã ãŸãŒã³ïŒ ç°ãªãå Žæã«ãããŠãŒã¶ãŒã«æ¥ä»ãæå»ã衚瀺ããéã«ã¯ãã¿ã€ã ãŸãŒã³ã«æ³šæããŠãã ãããã¿ã€ã ãŸãŒã³å€æãåŠçããé©åãªæ¥ä»ãã©ãŒãããã©ã€ãã©ãªã䜿çšããŸãã
- é貚ãã©ãŒãããïŒ ãŠãŒã¶ãŒã®ãã±ãŒã«ã«å¿ããŠé貚ã®å€ããã©ãŒãããããŸããç°ãªãé貚èšå·ãå°æ°ç¹åºåãæåãåŠçããé貚ãã©ãŒãããã©ã€ãã©ãªã䜿çšããŸãã
- ãããã¯ãŒã¯é å»¶ïŒ ç°ãªãå°åã®ãŠãŒã¶ãŒãšããåãããéã®æœåšçãªãããã¯ãŒã¯é å»¶ã®åé¡ã«æ³šæããŠãã ããããªããã£ãã¹ãã£ãã¯æŽæ°ãã³ã³ãã³ãããªããªãŒãããã¯ãŒã¯ïŒCDNïŒãªã©ã®æè¡ã䜿çšããŠããã©ãŒãã³ã¹ãåäžãããŸãã
- ããŒã¿ãã©ã€ãã·ãŒïŒ ãšãŒãããã®GDPRãã«ãªãã©ã«ãã¢ã®CCPAãªã©ãååœã®ããŒã¿ãã©ã€ãã·ãŒèŠå¶ã«æºæ ããŠãã ãããå人ããŒã¿ãåéã»åŠçããåã«ãŠãŒã¶ãŒããåæãåŸãŸãã
- ã¢ã¯ã»ã·ããªãã£ïŒ ã¢ããªã±ãŒã·ã§ã³ããå Žæã«é¢ä¿ãªãé害ãæã€ãŠãŒã¶ãŒã«ãšã£ãŠã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŠãã ãããWCAGãªã©ã®ã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ã«åŸããã¢ããªã±ãŒã·ã§ã³ãããå æ¬çãªãã®ã«ããŸãã
- å³ããå·ŠïŒRTLïŒãžã®ãµããŒãïŒ ã¢ããªã±ãŒã·ã§ã³ãå³ããå·Šã«æžãããèšèªïŒäŸïŒã¢ã©ãã¢èªãããã©ã€èªïŒããµããŒãããå Žåãã¬ã€ã¢ãŠããšã¹ã¿ã€ãªã³ã°ãRTLç°å¢ã«é©åã«é©å¿ãããŠããããšã確èªããŠãã ããã
- ã°ããŒãã«CDNïŒã³ã³ãã³ãããªããªãŒãããã¯ãŒã¯ïŒïŒ ã°ããŒãã«CDNã䜿çšããŠãéçã¢ã»ããïŒç»åãCSSãJavaScriptïŒããŠãŒã¶ãŒã®ç©ççãªå Žæã«è¿ããµãŒããŒããé ä¿¡ããŸããããã«ãããäžçäžã®ãŠãŒã¶ãŒã®èªã¿èŸŒã¿æéãå€§å¹ ã«æ¹åãããé å»¶ãæžå°ããŸãã
çµè«
experimental_useActionStateããã¯ã¯ãReactã¢ããªã±ãŒã·ã§ã³ã§ã¢ã¯ã·ã§ã³ã®ç¶æ
ã管çããããã®åŒ·åã§æŽç·Žããããœãªã¥ãŒã·ã§ã³ãæäŸããŸããç¶æ
管çãç°¡çŽ åããã³ãŒãã®å¯èªæ§ãåäžããããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã匷åããããšã§ãéçºè
ã¯ããå
ç¢ã§ä¿å®æ§ã®é«ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããããã«ãªããŸããå®éšçãªæ§è³ªãèªèããããšã¯éèŠã§ãããexperimental_useActionStateã®æœåšçãªå©ç¹ã¯ãããããReactéçºè
ã«ãšã£ãŠäŸ¡å€ããããŒã«ãšãªããŸããããŒã«ãªãŒãŒã·ã§ã³ãã¿ã€ã ãŸãŒã³ããããã¯ãŒã¯é
å»¶ãªã©ã®ã°ããŒãã«ãªèŠçŽ ãèæ
®ããããšã§ãexperimental_useActionStateãæŽ»çšããŠãäžçäžã®ãŠãŒã¶ãŒã«ã·ãŒã ã¬ã¹ãªäœéšãæäŸããçã«ã°ããŒãã«ãªã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸããReactãé²åãç¶ããäžã§ããããã®é©æ°çãªæ©èœãæ¢æ±ãæ¡çšããããšã¯ãã¢ãã³ã§é«æ§èœããã€ãŠãŒã¶ãŒãã¬ã³ããªãŒãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã«äžå¯æ¬ ã§ãããã®æè¡ããããŠããããæè¡ãå®è£
ããéã«ã¯ãã°ããŒãã«ãªãŠãŒã¶ãŒããŒã¹ã®å€æ§ãªèæ¯ããããã¯ãŒã¯ç¶æ³ãèæ
®ããŠãã ããã